<template>
  <div id="top">
    <ul class="top-left" style="list-style-type: none;margin:0;padding:0;">
      <li
        :class="[v.url == $route.path ? 'curLi' : '']"
        @click="urlTo(v.url)"
        v-for="(v, i) in navLeftList"
        :key="i"
        v-if="v.content.indexOf(urlPage) > -1"
      >
        <svg style="width: 20px;height:20px;" class="icon" aria-hidden="true">
          <use :xlink:href="v.icon" />
        </svg>
        <!-- <i class="el-icon-edit"></i> -->
        <p>{{ v.name }}</p>
        <span></span>
        <span></span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "top",
  data() {
    return {
      zhuangxiuPage:0,
      zhuangxiuId:0,
      zhuangxiDecodedName:'',
      pages: 1,
      navLeftList: [
        {
          name: "装修",
          icon: "#iconbianji",
          url: "/",
          content: "123",
        },
        {
          name: "启动页",
          icon: "#iconguanggao___",
          url: "/start",
          content: "1",
        },
        {
          name: "导航",
          icon: "#icondaohang",
          url: "/navs",
          content: "13",
        },
      ],
    };
  },
  created() {
    this.zhuangxiuPage=localStorage.getItem('zhuangxiuPage');
    this.zhuangxiuId=localStorage.getItem('zhuangxiuId');
    this.zhuangxiDecodedName=localStorage.getItem('zhuangxiDecodedName');
    console.log('left',this.zhuangxiuPage, this.zhuangxiuId, this.zhuangxiDecodedName); // 输出: "1" "16" "默认首页"
  },
  computed: {
    ...mapState([
      "list",
      "currentId",
      "currentName",
      "adv",
      "urlId",
      "urlPage",
      "urlName",
    ]),
  },
  methods: {
    ...mapMutations(["getCurrenChoose"]),
    urlTo(url) {
      console.log('urlTo',url,this.urlId?this.urlId:this.zhuangxiuId,this.urlName?this.urlName:this.zhuangxiDecodedName,this.urlPage?this.urlPage:this.zhuangxiuPage,)
      this.$router
        .push({
          path: url,
          query: { page: this.urlId?this.urlId:this.zhuangxiuId, id: this.urlId?this.urlId:this.zhuangxiuId, name: this.urlName?this.urlName:this.zhuangxiDecodedName },
        })
        .catch(() => {});
    },
  },
};
</script>


<style lang="less" scoped>
@import '~@/assets/css/base.less';
#top {
  height: calc(100vh - 66px);
  .top-left {
    width: 80px;
    background-color: #1e222b;
    height: calc(100vh - 60px);
    padding-top: 60px;
    > .curLi::after {
      content: "";
      width: 4px;
      height: 4px;
      position: absolute;
      right: 0;
      top: -4px;
      background: #1e222b;
      border-radius: 0 0 4px 0;
    }
    > .curLi::before {
      content: "";
      width: 4px;
      height: 4px;
      position: absolute;
      right: 0;
      bottom: -4px;
      background: #1e222b;
      border-radius: 0 4px 0 0;
      z-index: 1;
    }
    > .curLi {
      background-color: #fff !important;
      color: @mainColor !important;
      border-radius: 0px;
      position: relative;
      > span:nth-of-type(1) {
        display: inline-block;
        width: 4px;
        height: 4px;
        background: #fff;
        position: absolute;
        right: 0;
        top: -4px;
      }
      > span:nth-of-type(2) {
        width: 4px;
        height: 4px;
        background: #fff;
        position: absolute;
        right: 0;
        bottom: -4px;
      }
    }
    > li:hover {
      color: @mainColor;
    }
    > li {
      font-weight: bold;
      text-align: center;
      padding: 14px 0;
      color: #6b6f7a;
      cursor: pointer;
      transition: all 0.5s;
      border-radius: 0 5px;
      > p {
        font-size: 14px;
      }
    }
  }
}
</style>
